<template>
    <div class="info-detail">

        <img v-if="isImg" :src="data.extendContent" alt="">
        <div v-if="isPdf" class="read-pdf" >
			<!-- <pdf ref="pdf" :src="pdfUrl" ></pdf> -->
            <pdf ref="pdf" v-for="i in 10" :key="i" :src="pdfUrl" :page="i"></pdf>
            <!-- <PdfPreView :urlIn="pdfUrl" /> -->
		</div>
        <iframe v-else style=" position: fixed;" :src="data.extendContent" width="100%" height="85%"   >该浏览器无法支持PDF,请点击查看;
        <!-- <a :href="iframeSrc">下载 PDF</a> -->
        </iframe>
        <div class="scale-btn" >
            <van-button 
                @click="scaleD">
            +
            </van-button>
            <van-button 
                @click="scaleX">
            -
        </van-button>
        </div>
        
        <div class="fixedBottom">
            <van-button style="width: 100%;" type="info" :disabled="isdisabled" @click="benext">下一步</van-button>
        </div>
       
  
    </div>
</template>

<script>
import { getAxios2 } from "@/utils/request2";
import store from "@/store/index";
import pdf from 'vue-pdf'
import PdfPreView from "@/components/Attach/PdfPreView";
export default {
    components: {
		pdf,
        PdfPreView,
	},
    data(){
        return {
            isdisabled: false, // 按钮是否禁用  记得改回去
            videoPath:'', //视频路径
            industryType:'', // 行业类型 
            fileId: '',
            isFinish: 0,  // 是否看完：0，未看完   1：看完
            userId: '',
            pdfPath:'',
            data:{},
            isImg: true,
            isPdf:false,
            pdfUrl:'',
            idx: -1,
            scale: 100, // 放大系数
        }
    },
    created(){
    },
    mounted(){
        this.industryType = this.$route.query.industryType
        this.userId = localStorage.getItem('userId')
        this.getVideo()
       

    },
    updated(){
         console.log('pdf',this.$refs.pdf[0].$el.style.width)
         
    },
    methods: {
        // 放大
        scaleD(){
            this.scale += 5
            this.$refs.pdf.forEach(item => {
                item.$el.style.width = parseInt(this.scale) + "%";
            });
            // this.$refs.pdf[0].$el.style.width = parseInt(this.scale) + "%";
        },
        // 缩小
        scaleX(){
            this.scale -= 5
            this.$refs.pdf.forEach(item => {
                item.$el.style.width = parseInt(this.scale) + "%";
            });
        },

        // 重播事件
        rebroadcast(){
            this.isdisabled = true
            this.$refs.myVideo.play()
        },
        benext()
        {
            // this.$router.push({path:'/fgbm/showPdfFile'})
            // const currentTime = this.$refs.myVideo.currentTime
            const studyData = {
                fileId: "123123",
                userId: this.userId,
                isFinish: 1,
                industryType: this.industryType,
                studyTimes: 1000
            }
            // console.log(studyData)
            // this.saveStudy(studyData)
            localStorage.setItem("studyData", JSON.stringify(studyData))
            this.$router.push({ path: "/fgbm/signature" });

        },
        // 获取视频
        async getVideo(){
            // console.log(this.industryType)
            // const res = await this.$axios.get(`http://120.79.234.223:8558/system/content/detail?industryType=${this.industryType}`)
            let axios2=await getAxios2()
            // const res = await axios2.get(`http://120.79.234.223:8558/app/study/detail?industryType=${this.industryType}`)
            const res = await axios2.get(`https://fgbm.zatsafety.com/app/study/safetyDetail?tipId=${this.industryType}`)
            console.log(res)
            this.data=res.data
            
            if (this.data.suffix === 'doc' || this.data.suffix === 'xlsx'||this.data.suffix === 'docx') {
                this.data.extendContent = 'https://view.officeapps.live.com/op/embed.aspx?src='+this.data.extendContent
                this.isImg = false
            }else if(this.data.suffix==='pdf'){
                this.pdfUrl=this.data.extendContent
                this.isPdf=true;
            }
            
            
            this.fileId = res.data.tipId
            // this.videoPath = res.data.fileId.split(':=')[1]
            // this.videoPath = res.data.fileId
            store.state.title=res.data.tipTitle
        },
        // 保存学习进度
        async saveStudy(data){
            let axios2=await getAxios2()
            data.studyScore=""
            const res = await axios2.post('https://fgbm.zatsafety.com/app/study/saveStudyInfo',data)
            console.log(res)
            if (res.msg === "success") {
                localStorage.setItem('data', res.data)
                // this.$router.push({path:'/fgbm/showPdfFile',query:{industryType: this.industryType}})
                this.$router.push({ path: "/fgbm/signature" });
            }
        }
    }
}
</script>
<style >
img{
    width:100%
}
</style>
<style lang="less" scoped>
.contianer {
    .video-box {
        width: 100%;
        border-bottom: 1px #cecece solid;
        padding-bottom: 20px;
        video {
            width: 100%;
        }
    }
    .btn-box {
        width: 70%;
        margin: 20px auto;
        display: flex;
        flex-direction: column;
        .van-button {
            margin-bottom: 10px;
        }
    }
}
.info-detail {
  min-height: 100vh;
  background-color: #fff;
  padding: 0px;
  color: #333;
  font-size: 10px;
  padding-bottom: 0px;
  .info-detail-title {
    font-size: 18px;
    text-align: center;
    color: orange;
  }
  .info-detail-desc,
  .info-detail-company,
  .sign-for {
    text-align: center;
  }
  .info-detail-cont {
    min-height: 100px;
    height: 100%;
    width: 100%;
    /deep/ p {
      font-size: 13px !important;
    }
  }
  .sign-for {
    text-align: left;
    color: #f00;
  }
  .fixedBottom {
  position: fixed;
  bottom: 5px;
  width: 96%;
  margin-left: 10px;
  height: 5%;
}
}
.iframe {
  width: 100%;
  height: calc(100vh);
}
.scale-btn {
    position: fixed; 
    bottom: 70px;
    right: 30px;
    width: 120px;
    
   
    display: flex;
    justify-content: space-between;
    button {
        background: rgba(0,0,0,0);
        border: 1px solid #ccc;
        height: 50px;
        width: 50px;
        font-size: 32px;
        color: #666;
    }
}
</style>